<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('租户')" prop="lessee">
            <el-input v-model="form.lessee" :placeholder="$t('租户')" show-word-limit maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('租期')" prop="dateRange">
            <!--            <DatePicker-->
            <!--              v-model="form.dateRange"-->
            <!--              type="daterange"-->
            <!--            />-->
            <el-date-picker
              v-model="form.dateRange"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('租约名称')" prop="leaseName">
            <el-input v-model="form.leaseName" :placeholder="$t('租约名称')" show-word-limit maxlength="50" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('行业')" prop="industry">
            <el-input v-model="form.industry" :placeholder="$t('行业')" show-word-limit maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('房号')" prop="roomNumbers">
            <el-row>
              <el-col :span="20">
                <el-select v-model="form.roomNumbers" multiple filterable :placeholder="$t('房号')" :clearable="true">
                  <el-option
                    v-for="dict in roomNumbers"
                    :key="dict.id"
                    :label="$t(dict.roomNo)"
                    :value="dict.id"
                  />
                </el-select>
              </el-col>
              <el-col :span="4">
                <el-button type="primary" style="width: 100%;border: none;border-radius: 0" @click="toDealLicenseDetailsList">{{ $t('查看房号') }}</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('租约建筑面积（㎡）')" prop="leaseCoveredArea">
            <Money v-model="form.leaseCoveredArea" :placeholder="$t('租约建筑面积')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('租金收取频率')" prop="rentCollectionFrequency">
            <el-input v-model="form.rentCollectionFrequency" :placeholder="$t('租金收取频率')" show-word-limit maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('押金金额(元)')" prop="leaseDetainMoney">
            <Money v-model="form.leaseDetainMoney" :placeholder="$t('押金金额(元)')" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('备注')" prop="remark">
            <el-input v-model="form.remark" type="textarea" :placeholder="$t('备注')" show-word-limit maxlength="1000" />
          </el-form-item>
        </el-col>
      </el-row>
      <br>
      <br>
      <div>
        <div class="area-header">
          <span class="area-header-title">{{ $t('租金标准') }}</span>
        </div>
        <el-table
          :data="form.dealLeaseStandardList"
          border
          class="nowrapTable formTable"
        >
          <el-table-column :label="$t('序号')" type="index" align="center" width="50">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('起始日期')" align="center">
            <template slot="header" slot-scope="{}">
              <i style="color: #ff4949;margin-right: 4px;">*</i>
              <span>{{ $t('起始日期') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'dealLeaseStandardList.' + scope.$index + '.standStartDate' " :rules="LeaseStandardListRules.standStartDate">
                <el-date-picker
                  v-model="scope.row.standStartDate"
                  clearable
                  style="width: 200px"
                  type="date"
                  value-format="yyyy-MM-dd"
                  :placeholder="$t('起始日期')"
                />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('截止日期')" align="center">
            <template slot="header" slot-scope="{}">
              <i style="color: #ff4949;margin-right: 4px;">*</i>
              <span>{{ $t('截止日期') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'dealLeaseStandardList.' + scope.$index + '.standEndDate' " :rules="LeaseStandardListRules.standEndDate">
                <el-date-picker
                  v-model="scope.row.standEndDate"
                  clearable
                  style="width: 200px"
                  type="date"
                  value-format="yyyy-MM-dd"
                  :placeholder="$t('截止日期')"
                />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('租金标准(元/月/平米)')" align="center">
            <template slot="header" slot-scope="{}">
              <i style="color: #ff4949;margin-right: 4px;">*</i>
              <span>{{ $t('租金标准(元/月/平米)') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'dealLeaseStandardList.' + scope.$index + '.rentStandard' " :rules="LeaseStandardListRules.rentStandard">
                <Money v-model="scope.row.rentStandard" :placeholder="$t('押金金额(元)')" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('备注')" align="center">
            <template slot-scope="scope">
              <el-form-item :prop="'dealLeaseStandardList.' + scope.$index + '.standRemark' ">
                <el-input v-model="scope.row.standRemark" :placeholder="$t('备注')" />
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <br>
      <el-button type="primary" @click="countDealLeaseRentList">计算月度应收租金</el-button>
      <br>
      <br>
      <br>
      <div>
        <div class="area-header">
          <span class="area-header-title">{{ $t('月度租金明细') }}</span>
        </div>
        <el-table
          :data="form.dealLeaseRentList"
          show-summary
          :summary-method="getRent"
          border
          class="nowrapTable formTable"
        >
          <el-table-column :label="$t('序号')" type="index" align="center" width="50">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('年月')" align="center">
            <template slot="header" slot-scope="{}">
              <i style="color: #ff4949;margin-right: 4px;">*</i>
              <span>{{ $t('年月') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'dealLeaseRentList.' + scope.$index + '.years' " :rules="dealLeaseRentListRules.years">
                <el-date-picker
                  v-model="scope.row.years"
                  clearable
                  style="width: 200px"
                  type="date"
                  format="yyyy-MM"
                  :placeholder="$t('年月')"
                />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('应收租金(元)')" align="center">
            <template slot="header" slot-scope="{}">
              <i style="color: #ff4949;margin-right: 4px;">*</i>
              <span>{{ $t('应收租金(元)') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'dealLeaseRentList.' + scope.$index + '.receivableRent' " :rules="dealLeaseRentListRules.receivableRent">
                <Money v-model="scope.row.receivableRent" :placeholder="$t('应收租金(元)')" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column v-if="form.id" :label="$t('实收租金(元)')" align="center">
            <template slot-scope="scope">
              <el-form-item :prop="'dealLeaseRentList.' + scope.$index + '.paidInRent' ">
                <Money v-model="scope.row.paidInRent" :placeholder="$t('实收租金(元)')" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column v-if="form.id" :label="$t('实收日期')" align="center">
            <template slot-scope="scope">
              <el-form-item :prop="'dealLeaseRentList.' + scope.$index + '.paidInDate' ">
                <el-date-picker
                  v-model="scope.row.paidInDate"
                  clearable
                  style="width: 200px"
                  type="date"
                  value-format="yyyy-MM-dd"
                  :placeholder="$t('实收日期')"
                />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column v-if="form.id" :label="$t('状态')" align="center">
            <template slot-scope="scope">
              <el-form-item :prop="'dealLeaseRentList.' + scope.$index + '.rentState' ">
                <el-select
                  v-model="scope.row.rentState"
                  :placeholder="$t('请选择')"
                  class="wj"
                  @change="stateColor(scope.row, scope.$index)"
                >
                  <el-option label="未缴" value="WJ" />
                  <el-option label="已缴" value="YJ" />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column v-if="!form.id" :label="$t('操作')" align="center" width="80">
            <template slot-scope="scope">
              <el-button v-hasPermi="['deal:lease:remove']" size="small" type="text" icon="el-icon-delete" @click="delHandle(scope.$index, scope.row)" />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>
    <div v-if="!form.id" slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存 取消按钮-->
      <save-btn has-permi="deal:lease" />
    </div>
    <!-- 物业详情 -->
    <el-dialog
      :title="$t('物业详情')"
      :visible.sync="openDetails"
      :close-on-click-modal="false"
      :lock-scroll="false"
      append-to-body
    >
      <queryRoomNumber ref="queryRoomNumber" />
    </el-dialog>
  </div>
</template>

<script>
    import { saveDealLease, getDealLease, delDealLeaseRent, findSelect } from '@/api/deal/immovable/dealLease'
    import queryRoomNumber from '@/views/deal/immovable/queryRoomNumber'
    export default {
      components: { queryRoomNumber },
        data() {
            return {
              roomNumbers: [],
              queryParamsDetails: {
                dealId: this.$route.query.id
              },
              openDetails: false,
              rentStateOptions: [],
                // 表单参数
                form: {
                  roomNumbers: [],
                  // 租金标准表
                  dealLeaseStandardList: [],
                  // 租金明细表
                  dealLeaseRentList: []
                },
                // 遮罩层
                loading: false,
                // 表单校验
                rules: {
                  lessee: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                  ],
                  dateRange: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                  ],
                  // leaseName: [
                  //   { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                  // ],
                  roomNumbers: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                  ],
                  roomNumber: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                  ],
                  leaseCoveredArea: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                  ],
                  rentCollectionFrequency: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                  ],
                  leaseDetainMoney: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                  ]
                },
              LeaseStandardListRules: {
                standStartDate: [
                  { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                standEndDate: [
                  { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                rentStandard: [
                  { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ]
              },
              dealLeaseRentListRules: {
                years: [
                  { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                receivableRent: [
                  { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ]
              }
            }
        },
      watch: {
        'form.lessee': {
          handler() {
            if (this.form.lessee && this.form.dateRange[0] && this.form.dateRange[1]) {
              this.form.leaseName = this.form.lessee + '：' + this.parseTime(this.form.dateRange[0]) + '-' + this.parseTime(this.form.dateRange[1])
            }
          }
        },
        'form.roomNumbers': {
          handler() {
            if (this.form.roomNumbers) {
              var leaseCoveredArea = 0
            this.form.roomNumbers.forEach((id) => {
              this.roomNumbers.forEach((item) => {
                debugger
                if (id === item.id) {
                  leaseCoveredArea += Number(item.constructionArea)
                }
              })
            })
              this.form.leaseCoveredArea = leaseCoveredArea
            }
          }
        },
        'form.dateRange': {
          handler() {
            if (this.form.lessee && this.form.dateRange[0] && this.form.dateRange[1]) {
              this.form.leaseName = this.form.lessee + '：' + this.parseTime(this.form.dateRange[0]) + '-' + this.parseTime(this.form.dateRange[1])
            }
            // 生成租金标准
            if (this.form.dateRange[0] && this.form.dateRange[1]) {
              if (this.form.dateRange[0] !== this.form.leaseStartDate || this.form.dateRange[1] !== this.form.leaseEndDate) {
              // 租金标准条数 = 截止年 - 起始年
                // 截取年月日数据
              var startYear = this.parseTime(this.form.dateRange[0]).replace('', ':').replace(/\:/g, '-').split('-')
              var endYear = this.parseTime(this.form.dateRange[1]).replace('', ':').replace(/\:/g, '-').split('-')
                let add = 0
                // 如果 截止年月 > 初始年月 列表多增加一条数据
                if ((endYear[1] > startYear[1] && endYear[2] > startYear[2])) {
                  add = 1
                }
                console.log(startYear, endYear)
                this.form.dealLeaseStandardList = []
              // 起始和结束日期在同一年只增加一条
              if (endYear[1] - startYear[1] === 0) {
                const row = {
                  id: undefined,
                  leaseId: undefined,
                  standStartDate: this.form.dateRange[0],
                  standEndDate: this.form.dateRange[1],
                  rentStandard: undefined,
                  standRemark: undefined
                }
                if (!(this.form.dealLeaseStandardList instanceof Array)) {
                  this.$set(this.form, 'dealLeaseStandardList', [])
                }
                this.$nextTick(() => {
                  this.form.dealLeaseStandardList.push(row)
                })
              } else {
                for (let i = 0; i < (endYear[1] - startYear[1]) + add; i++) {
                  // 获取起始年份
                  const start = parseInt(startYear[1])
                  // 截止日期
                  var endDate = null
                  if (((parseInt(endYear[1]) - parseInt(startYear[1])) + add) - i === 1) {
                    // 最后一条数据截止日期为租约截止日期
                    endDate = this.form.dateRange[1]
                  } else {
                    // 处理 截止日期要 - 1 的问题
                    var end = (start + i + 1) + '-' + startYear[2] + '-' + startYear[3]
                    var startTime = new Date(end).getTime() - 24 * 60 * 60 * 1000
                    var startYears = new Date(startTime).getFullYear()
                    var startMonth = new Date(startTime).getMonth() + 1
                    var startDay = new Date(startTime).getDate()
                    endDate = startYears + '-' + startMonth + '-' + startDay
                  }
                  const row = {
                    id: undefined,
                    leaseId: undefined,
                    standStartDate: (start + i) + '-' + startYear[2] + '-' + startYear[3],
                    standEndDate: endDate,
                    rentStandard: undefined,
                    standRemark: undefined
                  }
                  if (!(this.form.dealLeaseStandardList instanceof Array)) {
                    this.$set(this.form, 'dealLeaseStandardList', [])
                  }
                  this.$nextTick(() => {
                    this.form.dealLeaseStandardList.push(row)
                  })
                }
              }
              }
              }
          },
          deep: true
        }
      },
        created() {
          this.getDicts('rent_state').then(response => {
            this.rentStateOptions = response.data
          })
          findSelect(this.queryParamsDetails).then(response => {
            this.roomNumbers = response.data
          })
        },
        methods: {
            // 初始化数据
            init(data) {
                this.loading = true
                if (data != null && data.id !== undefined) {
                    getDealLease(data.id).then(response => {
                        this.form = response.data
                      // 获取 下月二号
                      var y = new Date().getFullYear()
                      var m = new Date().getMonth() + 1
                      var res = new Date(y, m, 2)
                        if (this.form.dealLeaseRentList && this.form.dealLeaseRentList.length > 0) {
                          this.$nextTick(() => {
                            var eles = document.getElementsByClassName('wj')
                            for (let i = 0; i < eles.length; i++) {
                              var date = new Date(this.form.dealLeaseRentList[i].years)
                              var selectNode = (eles[i].childNodes)[1]
                              var inputNode = (selectNode.childNodes)[1]
                              console.log(this.parseTime(res), this.parseTime(date), '日期++++++++++')
                              if (this.form.dealLeaseRentList[i].rentState && this.form.dealLeaseRentList[i].rentState === 'WJ' && res > date) {
                                console.log(this.parseTime(res), this.parseTime(date), '日期')
                                inputNode.setAttribute('class', 'el-input__inner wj-color')
                              } else {
                                inputNode.setAttribute('class', 'el-input__inner')
                              }
                            }
                          })
                        }
                        this.loading = false
                    }).catch(() => {
                      this.loading = false
                    })
                } else {
                    this.reset()
                    this.loading = false
                }
            },
            // 表单重置
            reset() {
                this.form = {
                    id: undefined,
                    dealId: this.$route.query.id,
                    leaseName: undefined,
                    lessee: undefined,
                    industry: undefined,
                    lease: undefined,
                    roomNumber: undefined,
                    leaseCoveredArea: undefined,
                    leaseStartDate: undefined,
                    leaseEndDate: undefined,
                    leaseDetainMoney: undefined,
                    rentCollectionFrequency: undefined,
                    dateRange: [],
                    // 租金标准表
                    dealLeaseStandardList: [],
                    // 租金明细表
                    dealLeaseRentList: [],
                    remark: undefined,
                    delFlag: undefined,
                    createBy: undefined,
                    createTime: undefined,
                    updateBy: undefined,
                    updateTime: undefined,
                    roomNumbers: []
                }
                this.resetForm('form')
            },
            // 取消按钮
            cancel() {
                this.$parent.$parent.formOpen = false
                this.$parent.$parent.reset()
            },
            // 关闭form页面
            closeForm() {
                // 关闭form页面遮罩层
                this.loading = false
                // 关闭form页面
                if (this.$parent.$parent.formOpen !== undefined) {
                  this.$parent.$parent.formOpen = false
                }
                // 刷新list页面
                if (this.$parent.$parent.getList !== undefined) {
                  this.$parent.$parent.getList()
                }
            },
            /** 提交按钮 */
            submitForm() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        this.loading = true
                        this.form.leaseStartDate = this.form.dateRange[0]
                        this.form.leaseEndDate = this.form.dateRange[1]
                        this.form.dealLeaseStandardList.forEach(item => {
                          if (item.standStartDate) {
                            item.standStartDate = new Date(item.standStartDate)
                          }
                          if (item.standEndDate) {
                            item.standEndDate = new Date(item.standEndDate)
                          }
                        })
                      this.form.dealLeaseRentList.forEach(item => {
                        if (item.years) {
                          item.years = new Date(item.years)
                        }
                      })
                        saveDealLease(this.form).then(response => {
                            if (response.code === 200) {
                                this.msgSuccess(this.$t('保存成功'))
                                this.closeForm()
                            } else {
                                this.msgError(response.msg)
                            }
                            this.loading = false
                        })
                    } else {
                       this.locationError(document)
                    }
                }).catch(() => {
                    this.loading = false
                })
           },
          // 删除明细
          delHandle(index, row) {
            const id = row.id
            if (id !== undefined && id !== '' && id != null) {
              this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
                confirmButtonText: this.$t('确定'),
                cancelButtonText: this.$t('取消'),
                type: 'warning'
              })
                .then(function() {
                  return delDealLeaseRent(id)
                }).then(() => {
                this.form.dealLeaseRentList.splice(index, 1)
                return this.msgSuccess(this.$t('删除成功'))
              })
                .catch(function() {})
            } else {
              this.form.dealLeaseRentList.splice(index, 1)
            }
          },
          // 计算月度租金明细
          countDealLeaseRentList() {
            const hint = this.form.dealLeaseStandardList.some(item => {
              return !item.standStartDate || !item.standEndDate || !item.rentStandard
            })
              if (this.form.dealLeaseStandardList.length === 0 || !this.form.leaseCoveredArea) {
                this.$message({
                  message: '请先维护租金标准和租约建筑面积',
                  type: 'warning'
                })
              } else if (hint) {
                this.$message({
                  message: '请先维护完成租金标准',
                  type: 'warning'
                })
              } else {
                this.form.dealLeaseRentList = []
                // 满足条件生成月度租金明细列表  dealLeaseRentList
                // 租金标准行数
                let line = 0
                let line0 = 0
                // 获取租金标准 起始截止日期 用于验证 是否有重复
                this.form.dealLeaseStandardList.forEach(item => {
                  line++
                  // 计算租金标准的起始日期 和 截止日期相差月份
                  let date1 = this.parseTime(item.standEndDate).split('-')
                  date1 = parseInt(date1[0]) * 12 + parseInt(date1[1])
                  let date0 = this.parseTime(item.standStartDate).split('-')
                  date0 = parseInt(date0[0]) * 12 + parseInt(date0[1])
                  // 租金明细列表条数
                  const number = (date1 - date0)
                  let numbers = 0
                  if (line > 1 && line0 === 11) {
                    numbers = number + 1
                  } else {
                    numbers = number
                  }
                  if (line === 1) {
                    numbers = number + 1
                  }
                   line0 = number
                  if (numbers !== 0) {
                  for (let i = 0; i < numbers; i++) {
                    let contrst = 0
                    if (line > 1) {
                      // 月份重复则多加1月
                      var lineStartYear = this.parseTime(this.form.dealLeaseStandardList[line - 1].standStartDate).replace('', ':').replace(/\:/g, '-').split('-')
                      var lineEndYear = this.parseTime(this.form.dealLeaseStandardList[line - 2 ].standEndDate).replace('', ':').replace(/\:/g, '-').split('-')
                      if (lineStartYear[1] === lineEndYear[1] && lineStartYear[2] === lineEndYear[2]) {
                        contrst = 1
                      }
                    }
                    // 获取租金明细年月
                    let currentDate = this.parseTime(item.standStartDate)
                    currentDate = new Date(currentDate)
                    let nextDate = currentDate.setMonth(currentDate.getMonth() + 1)
                    nextDate = new Date(nextDate)
                    const nextYear = nextDate.getFullYear()
                    // line为 1 时 为第一条数据 月份多 + 1
                    var nextMonth = null
                    if (line === 1) {
                      nextMonth = nextDate.getMonth() + (i + contrst)
                    } else {
                      nextMonth = nextDate.getMonth() + i + contrst
                    }
                    nextDate = nextYear + '-' + nextMonth
                    // 月份> 12 nextDate 为第二年
                    if (nextMonth > 12) {
                      var twoDate = this.parseTime(item.standStartDate).replace('', ':').replace(/\:/g, '-').split('-')
                      var month = nextMonth - 12
                      nextDate = (parseInt(twoDate[1]) + 1) + '-' + this.checkMonth(month)
                    }
                    const row = {
                      id: undefined,
                      leaseId: undefined,
                      years: nextDate,
                      receivableRent: item.rentStandard * this.form.leaseCoveredArea,
                      paidInRent: undefined,
                      paidInDate: undefined,
                      rentState: 'WJ'
                    }
                    if (!(this.form.dealLeaseRentList instanceof Array)) {
                      this.$set(this.form, 'dealLeaseRentList', [])
                    }
                    this.$nextTick(() => {
                      this.form.dealLeaseRentList.push(row)
                    })
                  }
                  } else {
                    const row = {
                      id: undefined,
                      leaseId: undefined,
                      years: this.form.dealLeaseStandardList[0].standStartDate,
                      receivableRent: item.rentStandard * this.form.leaseCoveredArea,
                      paidInRent: undefined,
                      paidInDate: undefined,
                      rentState: 'WJ'
                    }
                    if (!(this.form.dealLeaseRentList instanceof Array)) {
                      this.$set(this.form, 'dealLeaseRentList', [])
                    }
                    this.$nextTick(() => {
                      this.form.dealLeaseRentList.push(row)
                    })
                  }
                })
                this.msgSuccess(this.$t('租金计算成功'))
              }
            },
          // 月份小于10时转换
          checkMonth(i) {
            if (i < 10) {
              i = '0' + i
            }
            return i
          },
          // 计算租金明细合计数据
          getRent(param) {
              var receivableRent = 0
              var paidInRent = 0
            this.form.dealLeaseRentList.forEach((item) => {
              if (item.receivableRent) {
                receivableRent += Number(item.receivableRent)
              }
              if (item.paidInRent) {
                paidInRent += Number(item.paidInRent)
              }
            })
            const { columns } = param
            const sums = []
            columns.forEach((column, index) => {
              if (index === 0) {
                sums[index] = '合计'
                return
              }
              if (index === 2) {
                sums[index] = this.moneyFormat(receivableRent)
              }
              if (index === 3 && this.form.id) {
                sums[index] = this.moneyFormat(paidInRent)
              }
            })
            return sums
          },
          // 状态颜色
          stateColor(row, index) {
            var date = new Date(row.years)
            // 获取 下月二号
            var y = new Date().getFullYear()
            var m = new Date().getMonth() + 1
            var res = new Date(y, m, 2)
            var eles = document.getElementsByClassName('wj')
            var selectNode = (eles[index].childNodes)[1]
            var inputNode = (selectNode.childNodes)[1]
            if (row.rentState && row.rentState === 'WJ' && res > date) {
              inputNode.setAttribute('class', 'el-input__inner wj-color')
            } else {
              inputNode.setAttribute('class', 'el-input__inner')
            }
          },
          toDealLicenseDetailsList() {
            this.openDetails = true
            this.$nextTick(() => {
              this.$refs.queryRoomNumber.getList(true, 'empty')
            })
          },
          chageTextColor(selectedRef, val, index) {
            let color = ''
            if (val.rentState === 'WJ') {
              color = '#ea3c37'
            }
            // 改变下拉框颜色值
            // this.$refs[selectedRef].$el.children[0].children[0].style.color = '' + color + ''
            this.form.dealLeaseRentList[index].$refs[selectedRef].$el.children[0].children[0].style.color = '' + color + ''
          }
          }
    }
</script>

<style lang="scss" scoped>
  el-form-item{
    .el-select {
      color: red;
    }
  }
  .item .el-option__label{
    color: red;
  }
  .wj /deep/ .wj-color {
    color: red
  }
</style>
